<template>
	<view class="balance-wrapper">
		<view class="balance-user-mony mg24">
			<view class="balance-user flex-c">
				<image :src="userInfo.portrait || '/static/images/default-img.png'" mode=""></image>
				<text class="fz26">{{userInfo.nickName}}</text>
			</view>
			<view class="balance-num">
				<up-text mode="price" size="28" color="#fff" bold :text="assetsInfo?.goldBalance || 0"></up-text>
				<!-- ￥{{assetsInfo?.goldBalance || 0}} -->
			</view>
			<view class="use-balance-num flex-c-s">
				<view class="flex-c fz26">
					<text>可提现余额</text> <text>{{assetsInfo?.goldBalance || 0}}</text>（元）
				</view>
				<view class="get-mony flex-c fz26" @click="extractMoney">
					<text>去提现</text>
					<uni-icons type="forward" size="20" color="#eb5883"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="reward-wrapper mg24">
			<view class="fz28 flex-c-s">
				<view class="flex-c">
					<text style="height:30rpx; width: 6rpx; border-radius: 3rpx; background-color: #EB5883;margin-right: 10rpx;"></text>
					<text class="fz28 fw700">收支明细</text>
				</view>
				<view class="">
					<u-tabs :list="tabsList" @click="tabsHalde"  lineColor="#EB5883"></u-tabs>
				</view>
			</view>
			<view class="conteainer-public-style" style="padding: 0 24rpx; padding-bottom: 24rpx;">
				<view class="reward-list-wrapper">
					<view class="reward-item flex-c-s fz26 b-b-1" v-for="(r, i) of rewardList" :key="i">
						<view class="">
							<view class="rewrad-desc" style="margin-bottom: 10rpx;">
								{{ r.remark }}
							</view>
							<view class="reward-time fz24 color999">{{ r.created_at || '-' }}</view>
						</view>
						<view class="reawrd-money fz32 fw700 color-theme">{{r.recordType === 1 ? '+' : '-'}} ￥{{ r.balance }}</view>
					</view>
				</view>
				
				
				<NoData v-show="!rewardList.length" msg="暂无收支明细" />
			</view>
		</view>
		<u-loadmore v-show="rewardList.length"
		        :status="statusText" marginTop="20"
		        :loading-text="loadingText" 
		        :loadmore-text="loadmoreText" 
		        :nomore-text="nomoreText" line
		    />
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, computed } from 'vue'
import { onShow, onReady, onReachBottom } from '@dcloudio/uni-app' 
import { assetsInfo, propertyChangeRecored } from '@/http/my'

import type { IUserInfo, IAssetsInfo } from '@/types'
import Payment from '@/components/Payment.vue'
import NoData from '@/components/NoData.vue'

export default defineComponent({
	components: { Payment, NoData },
	setup() {
		const paymentLayer = ref()
		const state = reactive({
			recharge: [50,100,200,500,1000,2000],
			rechargeMony: -1,
			rechargeNum: 0,
			userInfo: {} as IUserInfo,
			page: 1,
			pageSize: 50, 
			assetsInfo:{} as IAssetsInfo,
			rewardList: [] as Array<{
				created_at: string
				id: number,
				assetsType: number,
				assetsName: string,
				balance: number,
				recordType: number
				remark: string
			}>,
			total: 0,
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了',
			tabsList: [{
				name: '金豆', id: 1
			}, {
				name: '现金', id: 2
			}]
		})
		
		const rewardFormData = reactive({
			page: 1,
			pageSize: 8,
			assetsType: 1
		})
		
		const statusText = computed(() => {
			return state.total === state.rewardList.length ? 'nomore' : 'loadmore'
		})
		
		onShow(() => {
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					let user = JSON.parse(res.data || '{}');
					user && (state.userInfo = user || {});
				}
			})
			queryBalance()
		})
		
		onReady(() => {
			queryBalance()
			queryRecordList()
		}) 
		
		onReachBottom(() => {
			if(state.total === 0) return;
			if(state.total === state.rewardList.length) return;
			rewardFormData.page ++
			queryRecordList() 
		})
		
		const queryBalance = async (): Promise<void> => { // 查询余额
			let res = await assetsInfo()
			if(res.code === 0) {
				state.assetsInfo = res.data
			}
		}
		
		const queryRecordList = async (): Promise<void> => { // 查询收益列表
			let res = await propertyChangeRecored({
				...rewardFormData
			})   
			console.log(res);
			if(res.code === 0) {
				state.rewardList = [...state.rewardList, ...(res.data?.list || [])]
				state.total = res.data?.total || 0
			} else {
				uni.showToast({
					title: res.msg || '查询失败',
					icon: 'none'
				})
			}
		}
		
		const selectMony = (num: number) => {
			state.rechargeMony = num
			state.rechargeNum = state.recharge[num]
		}
		
		const payHandle = () => { 
			paymentLayer.value.openLayer()
		}
		
		const extractMoney = () => {
			uni.navigateTo({
				url: '/pages/myPackge/extract/extract'
			})
		}
		
		const rechargeAgreement = () => {
			uni.navigateTo({
				url: '/pages/myPackge/appInfo/rechargeAgreement'
			})
		}
		
		const tabsClick = (event: any) => {
			console.log(event);
		}
		
		const tabsHalde = (e: any) => {
			state.rewardList = []
			rewardFormData.assetsType = e.id
			rewardFormData.page = 1
			queryRecordList() 
		}
		return {
			paymentLayer,
			selectMony,
			payHandle,
			extractMoney,
			rechargeAgreement,
			tabsClick,
			statusText,
			tabsHalde,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background: #f8f8fa; }
</style>
<style scoped lang="scss">
.balance-wrapper{
	padding-bottom: 20rpx;
	.balance-user-mony{
		background-image: url(/static/images/Framebj86@2x.png);
		background-repeat: no-repeat;
		background-size: 702rpx 350rpx;
		background-position: center;
		height: 350rpx;
		color: #fff;
		
		.balance-user{
			padding: 32rpx 0 72rpx 32rpx;
			image{
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				margin-right: 10rpx;
			}
		}
		.balance-num{
			font-size: 48rpx;
			font-family: Plus Jakarta Sans, Plus Jakarta Sans-800;
			font-weight: 800;
			letter-spacing: -0.02px;
			margin-left: 32rpx;
		}
		.use-balance-num{
			margin-left: 32rpx;
		}
		.get-mony{
			text-align: center;
			color: #eb5883;
			width: 148rpx;
			height: 74rpx;
			background: #f8f8fa;
			border-radius: 38px 0px 0px 38px;
			padding-left: 20rpx;
		}
	}
	.recharge-list-wrapper{
		margin-top: 32rpx;
		.fz26{
			
		}
		.recharge-list{
			flex-wrap: wrap;
			margin-top: 20rpx;
			.recharge-item{
				width: 224rpx;
				height: 116rpx;
				text-align: center;
				line-height: 116rpx;
				background: #faebf1;
				border-radius: 32rpx;
				margin: 0 15rpx 15rpx 0;
				border: 2px solid #faebf1;
				box-sizing: border-box;
			}
			.clear-m{
				margin-right: 0;
			}
			.active-r{
				border: 2px solid #eb5883;
			}
		}
	}
	.recharge-bottom-opration{
		width: 100%;
		.flex-c-s{
			padding: 0 24rpx;
		}
		.public-large-btn{
			width: 286rpx;
			height: 74rpx;
			background: linear-gradient(270deg,#eb57ae 0%, #eb5480);
			border-radius: 38rpx;
			margin: 0;
			
		}
		.agreement{
			padding:16rpx 0 30rpx 0;
		}
	}
	.reward-wrapper{
		.conteainer-public-style{
			margin-top: 24rpx;
		}
		.reward-list-wrapper{
			background-color: #fff;
			margin-top: 24rpx;
			.reward-item{
				padding: 20rpx 0;
			}
		}
	}
}
</style>